<template>
  <div id="register">
    <div class="register2">
      <el-link type="info" :underline="false" style="left: -80px;top: -20px" @click="toLogin()">< 返回</el-link>
      <div>
        <h2>用户注册</h2>
        <el-form ref="form" :model="form" label-width="">
          <el-form-item>
            <el-input v-model="form.email" style="width: 300px;" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.vcode" style="width: 300px;" placeholder="请输入验证码" prefix-icon="el-icon-loading">
              <el-button style="padding-right:10px" slot="suffix" type="text" @click="created(form.email)">获取验证码
              </el-button>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.password" style="width: 300px;" placeholder="密码" show-password
                      prefix-icon="el-icon-key"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit(form.email,form.vcode,form.password)"
                       style="width: 300px;margin-top: 20px">下一步
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Register",
  data() {
    return {
      form: {
        email: '',
        password: '',
        vcode: '',
      },
    }
  },
  methods: {
    onSubmit(email, vcode, password) {
      if (email == '') {
        this.$alert('邮箱未输入', '错误', {
          confirmButtonText: '确定',
        });
      } else if (vcode == '') {
        this.$alert('验证码未输入', '错误', {
          confirmButtonText: '确定',
        });
      } else if (password == '') {
        this.$alert('密码未输入', '错误', {
          confirmButtonText: '确定',
        });
      } else {
        axios('/open/register', {
          params: {
            emailCode: vcode,
            userEmail: email,
            userPassword: password,
          },
          method: "post",
        }).then(res => {
          // console.log(res.data.message)
          if (res.data.code == 500106) {
            this.$alert('验证码错误', '错误', {
              confirmButtonText: '确定',
            });
          } else {
            console.log(res.data.data)
            this.$store.commit('updateuserId',res.data.data)
            this.$router.push('/Certification')
          }
        }).catch(function (error) {
          console.log(error);
        });
      }
    },
    toLogin() {
      this.$router.push('/Login')
    },
    created(email) {
      if (email == '') {
        this.$alert('邮箱未输入', '错误', {
          confirmButtonText: '确定',
        });
      } else {
        axios('/open/email', {
          params: {
            userEmail: email
          },
          method: "post"
        }).then(res => {
          console.log(res.data)
        }).catch(function (error) {
          console.log(error);
        });
      }
    },
  }
}
</script>

<style scoped>

#register {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #e6e6e6;
}

.register2 {
  border-radius: 20px;
  margin-left: 34%;
  margin-top: 6%;
  padding-left: 100px;
  padding-top: 50px;
  background: white;
  box-shadow: 4px 4px 4px #ccc;
  width: 400px;
  height: 400px;
}

</style>
